<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-08-28 22:26:46
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-08-28 22:55:40
 * @FilePath: /metaverse/src/pages/home/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="page full">
    <div class="model-wrap flex flex_column">
      <div class="flex_1 three-viewer-wrap">
        <div class="group-btn-position">
          <div class="round-btn" @click="next">下载</div>
          <div class="round-btn mt_sm" @click="share">分享</div>
        </div>
        <canvas class="full container" id="container" ref="containerRef"></canvas>

        <div class="video-wrap" v-if="video">
          <div class="round-btn home-position" @click="removeVideo">首页</div>
          <div class="round-btn upload-position" @click="removeVideo">照片上传</div>
          <img src="/static/rqcode.png" class="rqcode-position" />
          <video class="video" :src="`http://127.0.0.1:7001/${video?.url}`"></video>
        </div>
      </div>
      <div class="video-list">
        <div class="video-item" v-for="item in (model.videos || [])" :key="item.id">
          <div class="video full" :class="{'active': item.id === video?.id}" @click="toggleVideo(item)">
            <img  class="image" :src="`http://127.0.0.1:7001/${item.cover}`" />
          </div>
        </div>
      </div>
    </div>
    <div class="align-items_center justify_center btn-group">
      <div>
        <u-button class="link-btn" text="上一页" @click="prev"></u-button>
      </div>
      <div class="px_lg t_center name" @click="login">
        {{ model?.modelName }}
      </div>
      <div>
        <u-button class="link-btn" text="下一页" @click="next"></u-button>
      </div>
    </div>
  </view>
</template>

<script lang="ts">
import { defineComponent, watch } from 'vue';
import { useModel, useViewer, useUser } from './hooks';

export default defineComponent({
  name: 'Home',
  setup() {
    const { containerRef, viewer, toggleModel  } = useViewer();
    const { model, prev, next, toggleVideo, video, removeVideo } = useModel();
    const { login } = useModel();
    // watch(
    //   () => model.value,
    //   ({ modelPath, modelMesh }) => {
    //     toggleModel(modelPath, modelMesh);
    //   }
    // );

    const share = () => {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: "http://uniapp.dcloud.io/",
        title: "uni-app分享",
        summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
        imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        }
      })
    }

    
    return {
      containerRef,
      model,
      prev,
      next,
      toggleVideo,
      removeVideo,
      video,
      share,
      login
    };
  },
});
</script>

<style lang="scss" scoped>
.video-list {
  // position: absolute;
  // left: 0;
  // bottom: 0;
  // right: 0;
  display: flex;
  background: #492b05;
  padding: 4px;
  .video-item {
    width: calc(100vw / 6);
    height: calc(100vw / 6);
    padding: 6px;
    box-sizing: border-box;
  }
  .video {
    box-sizing: border-box;
    border: solid 2px #9c7c53;
    border-radius: 4px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    &.active {
      border-color: #f6da9d;
    }
  }
}

.model-wrap {
  //height: 500px;
  position: relative;
  height: calc(100% - 80px);
}

.three-viewer-wrap {
  margin: 8px;
  border: solid 2px #9c7c53;
  border-radius: 4px;
  position: relative;
}

.video-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.video {
  width: 100%;
  height: 100%;
}

.container{
  background: #34220e;
}

.btn-group {
  height: 80px;
}

.page {
  background: #000;
}

.name {
  font-size: 30px;
  -webkit-text-stroke: 1px #ffffff; /*文字描边*/
  -webkit-text-fill-color: transparent; /*设置文字的填充颜色*/
  line-height: 1;
}

.link-btn {
  // height: 30px;

  border: none !important;
  background: none !important;
  font-weight: bold;
  color: #fff;
  &:active {
    background: unset !important;
  }
  &::after {
    border: none !important;
  }
}

.image {
  display:block;
  width: 100%;
  height: 100%;
}

.round-btn {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: solid 2px #bc9b7c;
  background: #1d1007;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.9);
  line-height: 46px;
  text-align: center;
  color: #f8c931;
  font-weight: bold;
  font-size: 16px;
  box-sizing: border-box;
}

.home-position {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 9;
}

.group-btn-position {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 9;
}

.upload-position{
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 9;
  font-size: 14px;
  line-height: unset;
  padding: 4px;  
}

.rqcode-position {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 9;
  width: 100px;
  height: 100px;
}
</style>